{{if status == '0'}}
<header i-dom="header" class="ui-header {{if canPayTime>0 }}yellow{{else}}ui-box{{/if}}">
    <div class="tag-timer" data-time="{{canPayTime}}">
        {{if canPayTime<=0}}
        <span>支付超时</span>
        {{else}}
        <span>{{canPayTime | formatTime:'等待支付 - 剩余mm分ss秒'}}</span>
        {{/if}}
    </div>
</header>
<div class="header-holder"></div>
{{/if}}


{{if skus}}
<div class="ui-box">
    <div class="ui-bar order-id">
        <span>订单号</span>
        <b>{{_id}}</b>
    </div>
    {{if status != '0'}}
    {{each children}}
    <div class="child-order">
        <div class="bar-status child-order-status">
            <div style="display: inline;font-size: 12px"><span style="color: #888">商家</span><span
                    style="margin-left:10px;color: #111">{{$value.supplier.name}}</span></div>
            <div class="ui-c-f frame-status">
                <span class="label-status">{{getStatusTitle($value.status)}}</span>
            </div>
        </div>
        <div class="child-order-product-list">
            {{each $value.skus}}
            <div class="product">

                <img src="{{$value.pic}}?imageView2/2/w/200">

                <div class="tumb-top ui-c-f">
                    <div class="thum-price">
                        <div class="ui-price price-red">{{$value.price/10}}</div>
                        {{if $value.price_cost}}
                        <div class="ui-price price-gray">{{$value.price_cost/10}}</div>
                        {{/if}}
                    </div>
                    <h1>
                        {{$value.title}}
                    </h1>
                </div>
                <div class="quantity">{{$value.quantity}}</div>
            </div>
            {{/each}}
        </div>
        {{if status >= 30}}
        <div style="line-height: 36px;height: 36px;border-top: solid 1px #f0f0f0;color: #888;font-size: 12px">
            <div class="ui-more" style="padding: 0 8px"><span>查看物流</span></div>
        </div>
        {{/if}}
    </div>
    {{/each}}
    {{else}}
    <!-- 状态未支付时使用 -->
    <div class="product-list">
        {{each skus}}
        <div class="product">
            <img src="{{$value.pic}}?imageView2/2/w/200">

            <div class="tumb-top ui-c-f">
                <div class="thum-price">
                    <div class="ui-price price-red">{{$value.price/10}}</div>
                    {{if $value.price_cost}}
                    <div class="ui-price price-gray">{{$value.price_cost/10}}</div>
                    {{/if}}
                </div>
                <h1>
                    {{$value.title}}
                </h1>
            </div>
            <div class="quantity">{{$value.quantity}}</div>
        </div>
        {{/each}}
    </div>
    {{/if}}
</div>
{{/if}}

<div class="ui-box">
    <div class="ui-bar ui-v-a">
        优惠券
        <div class="float-right coupon">
            {{if coupon}}
            {{coupon.title}}
            {{else}}
            未使用
            {{/if}}
        </div>
    </div>
</div>


<div class="ui-box">
    <div class="ui-bar ui-v-a">
        商品总价
        <div class="float-right">
            <div class="ui-price">{{amount/10}}</div>
        </div>
    </div>
    {{if postage}}
    {{if postage.lack}}
    <div class="ui-bar ui-v-a">
        邮费<span class="lack">(还差<b>{{postage.lack/10}}元</b>包邮)</span>

        <div class="float-right">
            <div class="ui-price">{{postage.cost/10}}</div>
        </div>
    </div>
    {{else}}
    <div class="ui-bar ui-v-a">
        邮费<span class="lack"><b>(已包邮)</b></span>

        <div class="float-right">
            <div class="ui-price">{{postage.cost/10}}</div>
        </div>
    </div>
    {{/if}}
    {{/if}}
    <div class="ui-bar ui-v-a">
        为您节省
        <div class="float-right">
            <div class="ui-price">{{discount/10}}</div>
        </div>
    </div>
</div>

<div class="address ui-box ui-c-f">
    <h1>{{address.receiver_name}}</h1>

    <h2>{{address.phone}}</h2>

    <p>{{Pares_address(address.city)}} {{address.place}}</p>
</div>


{{if remark}}
<div class="remark ui-box">
   备注: {{remark}}
</div>
{{/if}}

<div class="ui-page-holder"></div>

<footer class="ui-v-a">
    <div class="ui-v-a label-amount"><span>金额:</span><span class="ui-price amount">{{needPay/10}}</span></div>

    {{if status ===0 && !cancel}}
    <button class="btn-pay" i-dom="btnPay"  i-tap="clickfb" ><span>付款</span></button>
    {{/if}}
</footer>

<style>

    header {
        line-height: 36px;
        text-align: center;
        font-size: 12px;
        color: #888;
    }

    .ui-header.ui-box {
        margin-top: 0;
    }

    .ui-header {
        background-color: #fff;
    }

    .ui-header.yellow {
        background-color: #f2df53;
        color: #111;
    }

    .header-holder {
        height: 36px;
    }

    .amount {
        color: #f2df53;

        font-size: 14px;
    }

    .label-amount {
        color: #dcdcdc;
        font-size: 12px;
        display: inline;
        margin-left: 10px;
    }

    .address {
        height: 90px;
        padding: 12px 8px 0 8px;
    }

    .address h1 {
        display: inline-block;
        font-size: 16px;
        font-weight: lighter;
        padding: 8px 0;
    }

    .address h2 {
        display: inline-block;
        font-size: 12px;
        font-weight: lighter;
    }

    .address h2::after {
        content: '';
        display: block;
    }

    .address p {
        font-size: 12px;
        color: #888888;
        margin-right: 60px;
        max-height: 3em;
        line-height: 1.5em;
    }

    .product {
        width: 100%;
        height: 100px;
        padding: 8px 0;
        border-top: solid 1px #f0f0f0;
    }

    .product h1 {
        font-size: 13px;
        font-weight: lighter;
        width: 210px;
        margin-top: 8px;
        margin-left: 8px;
        float: left;
    }

    .product > img {
        margin-left: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        float: right;
        margin-right: 8px;
        margin-top: 8px;
        text-align: right;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
    }

    .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .quantity {
        color: #888888;
        float: right;
        margin-right: 8px;
        font-size: 12px;
    }

    .quantity::before {
        content: 'x';
        display: inline-block;
    }

    .float-right {
        height: 100%;
        float: right;
    }

    .coupon {
        color: #888888;
    }

    .ui-bar {
        font-size: 14px;
    }

    .ui-bar:last-child {
        border-bottom: none;
    }

    .btn-pay {
        margin: 5px;
        width: 98px;
        height: 34px;
        float: right;
        background-color: #f9e043;
    }

    .child-order {
        padding-left: 15px;
        border-top: solid 1px #f0f0f0;
    }

    .child-order-status {
        height: 36px;
        line-height: 36px
    }

    .frame-status {
        float: right;
        margin-right: 10px;
    }

    .order-id {
        height: 36px;
        line-height: 36px;
    }

    .order-id > span {
        font-size: 12px;
        color: #888888;
    }

    .order-id > b {
        font-size: 12px;
        font-weight: lighter;
    }

    .label-status {
        font-size: 13px;
        color: #111;
    }

    .supplier-product-list .product > img {
        margin-left: 0;
    }

    .child-order {
        padding-left: 15px;
        border-top: solid 1px #f0f0f0;
    }

    .float-right .ui-price {
        color: red;
    }

    .lack {
        font-size: 12px;
    }

    .lack b {
        color: red;
        font-weight: normal;
    }

    .remark {
        color: #888;
        padding: 12px 8px;

        font-size: 12px;
    }
</style>